<div class="layui-form" lay-filter="form-banner" style="padding: 20px 30px 0 0;">
    <script type="text/html" template lay-done="layui.data.sendParams(d.params)"></script>
    <div class="layui-form-item ">
        <label class="layui-form-label">轮播图名称</label>
        <div class="layui-input-block">
            <script type="text/html" template>
                <input type="text" name="name" value="{{ d.params.name || '' }}" lay-verify="required"
                       autocomplete="off" class="layui-input" lay-verType="tips" lay-verify="required">
            </script>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">轮播图</label>
        <div class="layui-input-inline">
            <script type="text/html" template>
                <input type="hidden" id="imageUrl" name="imageUrl" value="{{ d.params.imageUrl || '' }}"
                       placeholder="请输入轮播图"
                       type="text" class="layui-input"
                       lay-verType="tips"
                       lay-verify="required"/>
                <button type="button" class="layui-btn layui-btn-primary" id="LAY_imageUrl_Upload_E{{ d.params.id}}">
                    <i class="layui-icon">&#xe67c;</i>上传图片(750*375)
                </button>
            </script>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">背景颜色</label>
        <div class="layui-input-inline" style="width: 120px;">
            <script type="text/html" template>
                <input type="text" id="backGround" name="backGround" value="{{ d.params.backGround || '' }}"
                       placeholder="请输入背景颜色" type="text" class="layui-input"
                       lay-verType="tips"
                       lay-verify="required"/>
            </script>
        </div>
        <div class="layui-inline" style="left: -11px;">
            <div id="backgroundSelect"></div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">排序号</label>
        <div class="layui-input-block">
            <script type="text/html" template>
                <input type="number" name="sort" value="{{ d.params.sort || '0' }}"
                       placeholder="请输入排序号" class="layui-input" min="0" max="1000" lay-verify="number"
                       lay-verType="tips" lay-verify="required"/>
            </script>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-inline">
            <input type="button" lay-submit lay-filter="LAY-banner-edit-submit" value="确认"
                   class="layui-btn layui-btn-fluid">
        </div>
    </div>
</div>

<script>

    layui.data.sendParams = function (params) {
        layui.use(['admin', 'form', 'setter', 'upload', 'colorpicker'], function () {
            var $ = layui.$
                , admin = layui.admin
                , form = layui.form
                , upload = layui.upload
                , colorpicker = layui.colorpicker
                , setter = layui.setter;

            var apiUrl = setter.apiUrl;


            form.render('select');

            //表单赋值
            colorpicker.render({
                elem: '#backgroundSelect'
                , color: params.backGround
                , format: 'rgb' //默认为 hex
                , done: function (color) {
                    $('#backGround').val(color);
                }
            });


            var imageUrlSrcE = $('#imageUrl');
            var uploadIns = upload.render({
                url: apiUrl + '/mapi/file/upload'
                , headers: {'token': layui.data(setter.tableName).token}
                , elem: '#LAY_imageUrl_Upload_E' + params.id,
                before: function () {
                    layer.msg('图片上传中...', {
                        icon: 16,
                        shade: 0.01,
                        time: 0
                    })
                }
                , done: function (res) {
                    layer.close(layer.msg());
                    if (res.code === 0) {
                        imageUrlSrcE.val(res.data.url);
                        imageUrlShowE();
                        uploadIns.config.elem.next()[0].value = '';
                    } else {
                        layer.msg(res.msg, {icon: 5});
                    }
                }
            });

            //查看头像
            admin.events.imageUrlPreviewE = function (othis) {
                var src = imageUrlSrcE.val();
                layer.photos({
                    photos: {
                        "title": "查看图标" //相册标题
                        , "data": [{
                            "src": src //原图地址
                        }]
                    }
                    , shade: 0.01
                    , closeBtn: 1
                    , anim: 5
                });
            };

            function imageUrlShowE() {
                var src = imageUrlSrcE.val();
                layer.photos({
                    photos: {
                        "title": "查看图片" //相册标题
                        , "data": [{
                            "src": src //原图地址
                        }]
                    }
                    , shade: 0.01
                    , closeBtn: 1
                    , anim: 5
                });
            }
        });
    }
</script>